<template>
    <div class="container">
        <div class="left-nav">
            <div class="tree-box">
                <div
                    class="tree-item"
                    v-for="item in navList"
                    :key="item.value"
                >
                    <div class="tree-title" @click="onTreeClick(item.value)">
                        <img class="tree-icon" :src="item.icon" />
                        {{ item.label }}
                        <el-icon size="14" color="#333">
                            <ArrowUp v-if="open.includes(item.value)" />
                            <ArrowDown v-else />
                        </el-icon>
                    </div>
                    <div class="tree-sub" v-show="open.includes(item.value)">
                        <div
                            class="tree-sub-item"
                            :class="{ active: active === child.value }"
                            v-for="child in item.children"
                            :key="child.value"
                            @click="onTreeSubClick(child.value)"
                        >
                            {{ child.label }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="right-content">
            <Material :active="active" />
        </div>
    </div>
</template>
<script setup>
import { ArrowUp, ArrowDown } from "@element-plus/icons-vue";
import { useContent } from ".";
import Material from "./components/material/P.vue";
const { open, active, navList, onTreeClick, onTreeSubClick } = useContent();
</script>
<style lang="scss" scoped>
.container {
    width: 100%;
    display: flex;

    .left-nav {
        width: 170px;
        flex-shrink: 0;
        min-height: 100%;
        border-right: 1px solid #f1f1f1;

        .tree-box {
            padding-top: 30px;
            user-select: none;

            .tree-item {
                cursor: pointer;

                .tree-title {
                    display: flex;
                    align-items: center;
                    font-size: 16px;
                    color: #333;
                    padding-left: 30px;

                    .tree-icon {
                        width: 18px;
                        height: 18px;
                        margin-right: 10px;
                    }

                    :deep(.el-icon) {
                        margin-left: 27px;
                    }
                }
            }

            .tree-sub {
                margin-top: 10px;

                &-item {
                    line-height: 30px;
                    font-size: 14px;
                    color: #999;
                    padding-left: 52px;
                    cursor: pointer;
                    margin: 5px 0;

                    &.active {
                        position: relative;
                        background: #edf3ff;
                        color: #5085fb;

                        &::after {
                            content: "";
                            position: absolute;
                            right: 0;
                            top: 0;
                            width: 3px;
                            height: 30px;
                            background: #5085fb;
                        }
                    }
                }
            }
        }
    }

    .right-content {
        width: 100%;
    }
}
</style>
